<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大中小</title>
    <style>
        #fs{
            width: 260px;
            border:solid 1px red;
            padding:10px;
        }
        .focus{
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="fs">
<!--    javascript: 不让超级链接跳转-->
    <a href="javascript:">大</a>
    <a href="javascript:">中</a>
    <a href="javascript:" class="focus">小</a>
    <p>“春日经济”持续攀升，牵动餐饮、购物、体育等服务消费稳步增长，为推动经济持续回升向好注入新动能，这背后既有文旅市场供给端持续发力，更有文旅消费的爆发增长、转型升级。</p>
</div>
    <script>
        function clear_class(){
            for (i=0;i<focus.children.length;i++){
                focus.children[i].removeAttribute("class")
            }
        }
        var focus=document.getElementById("fs")
        var point=document.getElementsByTagName("p")[0]
        focus.children[0].onclick=function (){
            // 清除所有样式调用函数
            clear_class()
            // 设置选中样式效果
            focus.children[0].className="focus"

            // focus.children[1].className="none"
            // focus.children[2].className="none"
            point.style.fontSize="30px"
        }
        focus.children[1].onclick=function (){
            // 清除所有样式调用函数
            clear_class()
            focus.children[1].className="focus"
            // focus.children[0].className="none"
            // focus.children[2].className="none"
            point.style.fontSize="20px"
        }
        focus.children[2].onclick=function (){
            // 清除所有样式调用函数
            clear_class()
            focus.children[2].className="focus"
            // focus.children[0].className="none"
            // focus.children[1].className="none"
            point.style.fontSize=""
        }
        for (i=0;i<focus.children.length;i++){
            //  targetName的值判断严格区分大小写，全等必须是标签名的大写
            if (focus.children[i].tagName==="A"){
                console.log(focus.children[i])
            }

        }
    </script>

</body>
</html>